<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .form{
            width: 500px;
            margin: 0 auto;
            background-color: #dedede;
            padding: 20px;
            box-sizing: border-box;
            margin-bottom: 20px;
        }
        .form label{
            display: block;
        }
        .form input{
            margin: 10px 0px;
            display: block;
            width: 100%;
        }
        .table-list{
            width: 900px;
            margin: 0 auto;
            border-collapse: collapse;
            border-spacing: 0;
            text-align: center;
        }
        .table-list td{
            border: 1px solid #999;
            padding: 6px 0px;

        }
        .table-list thead{
            background-color: black;
            color: white;
        }
        .table-list .btn-group input[type=text]{
            width: 60px;
            text-align: center;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        <div class="form">
            <div>
                <label>产品名称</label>
                <input type="text" v-model="product.name">
            </div>
            <div>
                <label>产品单价</label>
                <input type="number" v-model.number="product.price">
            </div>
            <div>
                <label>购买数量</label>
                <input type="number" v-model.number="product.num">
            </div>
            <div>
                <input type="button" value="添加到购物车" @click="addItem()">
            </div>
        </div>
        <table class="table-list">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="all">
                    </td>
                    <td>编号</td>
                    <td>产品名称</td>
                    <td>产品单价</td>
                    <td>购买数量</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(p, i) in products" :key="p.id">
                    <td>
                        <input type="checkbox" v-model="p.state">
                    </td>
                    <td>{{ i+1 }}</td>
                    <td>{{ p.name }}</td>
                    <td>{{ p.price }}</td>
                    <td class="btn-group">
                        <input type="button" value="-" @click=" subItemNum(i) ">
                        <!-- <input type="button" value="-" @click=" subItemNum(p) "> -->
                        <input type="text" readonly :value="p.num">
                        <input type="button" value="+" @click=" p.num++ ">
                    </td>
                    <td>
                        <input type="button" value="删除" @click="removeItem(i)">
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2">总计:</td>
                    <td colspan="3">
                        被选中<span style="color:red;">{{ result.count }}</span>个，
                        总价<span style="color:red;">{{ result.sum }}</span>元
                    </td>
                    <td>
                        <input type="button" value="删除选中项" @click="removeCheckItem()">
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                product:{
                    name:"",
                    price:0,
                    num:0,
                    state:false
                },
                products:[
                    { id:21321321,name:"Jose",price:300,num:2,state:false },
                    { id:34343433,name:"Carolyne",price:400,num:1,state:false },
                    { id:56565655,name:"Lysanne",price:200,num:3,state:false },
                    { id:67676766,name:"Andy",price:100,num:1,state:false }
                ]
            },
            computed:{
                all:{
                    get(){
                        if(this.products.length==0){
                            return false;
                        }
                        for (let i = 0; i < this.products.length; i++) {
                            if(!this.products[i].state) return false;
                        }
                        return true;
                    },
                    set(nv){
                        for (let i = 0; i < this.products.length; i++) {
                            this.$set(this.products[i],"state",nv)
                        }
                    }
                },
                result(){
                    let obj = {
                        count:0,
                        sum:0
                    }
                    for (let i = 0; i < this.products.length; i++) {
                        if(this.products[i].state){
                            obj.count += 1;
                            obj.sum += this.products[i].price*this.products[i].num
                        }
                    }
                    return obj;
                }
            },
            methods: {
                removeItem(i){
                    this.products.splice(i,1);
                },
                subItemNum(i){
                    let num = this.products[i].num - 1;
                    if(num<=0){
                        let flag = confirm("是否删除该商品");
                        if(flag){
                            this.removeItem(i);
                        }
                        return;
                    }
                    this.products[i].num = num;
                },
                // subItemNum(p){
                //     p.num--
                // },
                addItem(){
                    this.product.id = Math.floor(Math.random()*100000000)
                    this.products.push(this.product)
                    this.product = {
                        name:"",
                        price:0,
                        num:0,
                        state:false
                    }
                },
                removeCheckItem(){
                    for (let i = this.products.length-1 ; i >=0 ; i--) {
                        if(this.products[i].state){
                            this.removeItem(i);
                        }
                    }
                }
            },
        })
    </script>
</body>
</html>